<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品总览3</title>
    <link rel="stylesheet" href="./src/css/bootstrap.min.css">
    <link rel="stylesheet" href="./src/css/index.css">
    <script src="./src/js/jquery-1.10.2.min.js"></script>
    <script src="./src/js/setScale.js"></script>
</head>

<body>
    <div class="wrapper">
        <div class="global-content">
            <header>
                <img src="./src/img/logo.png" alt="">
                <div class="user-info">
                    <p>你好，陈月华</p>
                    <p>
                        <a href="javascript:;"> <img style="width:11px;height: auto;" src="./src/img/key.png" alt="">
                            修改密码</a>
                        <a href="javascript:;"> <img style="width:13px;height: auto" src="./src/img/logout.png" alt="">
                            退出系统</a>
                    </p>
                </div>
            </header>

            <div class="cp-wrapper clearfix">
                <nav class="left-nav">
                    <div class="nav-item">
                        <a href="javascript:;" class="">
                            <span class="img-box sdfx"></span>
                            <span class="badge">1</span>
                            <p>散点风险</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box cpfx"></span>
                            <span class="badge">22</span>
                            <p>产品风险</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box qyfx"></span>
                            <p>企业风险</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box lyts"></span>
                            <p>领域态势</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box qyts"></span>
                            <p>区域态势</p>
                        </a>

                    </div>
                    <div class="nav-item">
                        <a href="javascript:;">
                            <span class="img-box cyzl"></span>
                            <p>产业总览</p>
                        </a>

                    </div>
                </nav>
                <div class="right-content bg5-right clearfix">
                    <div class="cp-box-item bg5-1 clearfix">
                        <div class="bg5-1-1">
                            <p class="bg5-1-1tit">高风险对象数量</p>
                            <div class="bg5-1-1-item">
                                <div>
                                    <div class="t">
                                        <p>生物制品企业</p>
                                        <p class="num">5 家</p>
                                    </div>
                                </div>
                                <div>
                                    <div class="t">
                                        <p>注射剂生产企业</p>
                                        <p class="num">5 家</p>
                                    </div>
                                </div>
                                <div>
                                    <div class="t">
                                        <p>生物制品产品</p>
                                        <p class="num">5 家</p>
                                    </div>
                                </div>
                                <div>
                                    <div class="t">
                                        <p>注射剂产品</p>
                                        <p class="num">5 家</p>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="bg5-1-1">
                            <p class="bg5-1-1tit"> 药品许可类别占比</p>
                            <div id="main-pie" style="width: 100%;height:350px;"></div>
                        </div>
                        <div class="bg5-1-1">
                            <p class="bg5-1-1tit">药品剂型分类占比</p>
                            <div id="main-pie2" style="width: 100%;height:350px;"></div>

                        </div>
                    </div>
                    <div class="cp-box-item bg5-1">
                        <p class="cp-box-item-tit">历年高风险企业数量变化趋势</p>
                        <div id="main-line1" style="width: 100%;height:100%;"></div>

                    </div>
                    <div class="cp-box-item bg5-1">
                        <p class="cp-box-item-tit">区域高风险企业分布</p>
                        <div id="main-bar" style="width: 100%;height:100%;"></div>

                    </div>
                    <div class="cp-box-item bg5-1">
                        <p class="cp-box-item-tit">历年高风险产品数量变化趋势</p>
                        <div id="main-line2" style="width: 100%;height:100%;"></div>

                    </div>


                </div>
            </div>

        </div>
    </div>
    <script src="./src/js/echarts.min.js"></script>
    <script>
        $(function () {
            shwoPie({
                id: 'main-pie',
                title: '药品许可类别占比',
                colorLiist: ['#9322E5', '#F57223', '#EB2929', '#B0F81C', '#21D343', '#2B76FF',
                    '#29A5FF'
                ],
                data: [{
                        value: 335,
                        name: '化学药'
                    },
                    {
                        value: 310,
                        name: '中成药'
                    },
                    {
                        value: 234,
                        name: '生物制品'
                    },
                    {
                        value: 135,
                        name: '特殊药品'
                    },
                    {
                        value: 1548,
                        name: '体外诊断试剂'
                    }, {
                        value: 1548,
                        name: '中药饮片'
                    }, {
                        value: 1548,
                        name: '药用辅料'
                    }

                ]
            })

            shwoPie({
                id: 'main-pie2',
                title: '药品剂型分类占比',
                colorLiist: ['#C66817', '#FF292A', '#2B5FFF', '#F5A623', '#EB2982', '#F8E71C',
                    '#7ED321',
                    '#2BDDFF', '#05BC6E'
                ],
                data: [{
                        value: 335,
                        name: '气雾剂'
                    },
                    {
                        value: 310,
                        name: '注射剂'
                    },
                    {
                        value: 234,
                        name: '颗粒剂'
                    },
                    {
                        value: 135,
                        name: '眼用制剂'
                    },
                    {
                        value: 1548,
                        name: '雾用制剂'
                    }, {
                        value: 1548,
                        name: '吸入制剂'
                    }, {
                        value: 1548,
                        name: '片剂'
                    }, {
                        value: 1548,
                        name: '喷雾剂'
                    }, {
                        value: 1548,
                        name: '胶囊剂'
                    }

                ]
            })



            // 历年高风险企业数量变化趋势

            showLine({
                id: "main-line1",
                unit: '单位：家',
                xData: ["2014", "2014", "2014", "2014", "2014"],
                isStack: true,
                value: [{
                    name: '',
                    value: [1, 2, 9, 235, 6, 1]
                }],
                lineColor: ['#F8E71C', '#00C601', '#FF9722', '#EB3432']

            })



            //区域高风险企业分布
            showBar({
                id: "main-bar",
                unit: '单位：家',
                xData: ["杭州", "宁波", "温州", "湖州", "嘉兴", "杭州", "宁波", "温州", "湖州", "嘉兴"],

                isStack: false,

                value: [{
                    name: '',
                    value: [1, 2, 9, 235, 6, 1, 2, 9, 235, 6]
                }],
                lineColor: ['#29A1F7', '#29A1F7', '#FF9722', '#EB3432']

            })

            // 历年高风险产品数量变化趋势

            showLine({
                id: "main-line2",
                unit: '单位：个',
                xData: ["2014", "2014", "2014", "2014", "2014"],
                isStack: true,
                value: [{
                    name: '',
                    value: [1, 2, 9, 235, 6, 1]
                }],
                lineColor: ['#FF292A', '#00C601', '#FF9722', '#EB3432']

            })
        })



        function shwoPie(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据


            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                    textStyle: {
                        fontSize: 16
                    }
                },
                series: [{
                    name: cfg.title,
                    type: 'pie',
                    radius: ['35%', '50%'],
                    center: ['50%', '50%'],
                    color: cfg.colorLiist,
                    data: cfg.data,
                    label: {
                        normal: {
                            show: true,
                            formatter: "{b} \n{d}%",
                            textStyle: {
                                fontSize: 16
                            }
                        }

                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }




        function showLine(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var legData = [];
            var sArrat = []
            $.each(cfg.value, function (index, value) {
                if (cfg.isStack) {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "line",

                        barWidth: 30,
                        data: value.value
                    })
                } else {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "line",
                        data: value.value
                    })
                }

            })
            var option = {

                grid: {
                    top: 110,
                    left: 50,
                    right: 40,
                    bottom: 40
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        fontSize: 16
                    }
                },
                legend: {
                    data: legData,
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    itemGap: 5,
                    itemWidth: 14,
                    itemHeight: 8,
                    top: 40
                },
                xAxis: {
                    data: cfg.xData,
                    boundaryGap: false,
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                color: cfg.lineColor,
                yAxis: {
                    name: cfg.unit,

                    nameTextStyle: {
                        color: "#FFFFFF",
                        fontSize: 16
                    },
                    splitLine: {
                        show: false
                    },
                    splitNumber: 5,
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,70,255,0.15)', 'rgba(0,70,255,0)']
                        }
                    },
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                series: sArrat
            };
            if (cfg.max) {
                option.yAxis.max = cfg.max
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function showBar(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var legData = [];
            var sArrat = []
            $.each(cfg.value, function (index, value) {
                if (cfg.isStack) {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "bar",

                        barWidth: 30,
                        data: value.value
                    })
                } else {
                    legData.push(value.name)
                    sArrat.push({
                        name: value.name,
                        type: "bar",
                        data: value.value
                    })
                }

            })
            var option = {
                title: {
                    text: cfg.title || '',
                    textStyle: {
                        color: "#1178C9",
                        fontSize: 14
                    },
                    left: 10,
                    top: 5
                },
                grid: {
                    top: 110,
                    left: 50,
                    right: 50,
                    bottom: 40
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        fontSize: 16
                    }
                },
                legend: {
                    data: legData,
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },

                    itemWidth: 14,
                    itemHeight: 8,
                    top: 25
                },
                xAxis: {
                    data: cfg.xData,
                    //   boundaryGap: false,
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                color: cfg.lineColor,
                yAxis: {
                    name: cfg.unit,

                    nameTextStyle: {
                        color: "#FFFFFF",
                        fontSize: 16
                    },
                    splitLine: {
                        show: false
                    },
                    splitNumber: 5,
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,70,255,0.15)', 'rgba(0,70,255,0)']
                        }
                    },
                    axisLabel: {
                        color: "#FFFFFF",
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {}
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#1178C9"
                        }
                    }
                },
                series: sArrat
            };
            if (cfg.max) {
                option.yAxis.max = cfg.max
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>
</body>

</html>